@use "../../assets/scss/mixins/size" as mx;

body {
  background-color: #fff;
}

.container {
  font-size: 8px;
  position: relative;
  margin: 0 auto;
  width: 38.5em;
  height: 38.5em;
  .shadow {
    @include mx.pos_bl(0, 50%);
    @include mx.circle(0.125em, #999);
    transform: rotateX(83deg);
    box-shadow: 0 2em 20em 13em #8f8f8f;
    z-index: -1;
  }
  .ring {
    position: relative;
    @include mx.circle(100%, #c7c7c7);
    border: 0.125em solid #e1e1e1;
    background-image: linear-gradient(-45deg, #eaeaea 20%, #d4d4d4, #c7c7c7);
    @include mx.pseudo {
      border-radius: 50%;
      display: block;
    }
    &::before {
      top: 1em;
      left: 1em;
      @include mx.circle(36em, #d1d1d1);
      border: 0.25em solid #b2b2b2;
      border-bottom: 0.125em solid #959595;
      border-right: 0.125em solid #959595;
      background-image: linear-gradient(-45deg, #f2f2f2 15%, #d1d1d1);
      box-shadow: inset 0.125em 0.125em 0.5em 0.125em #818181;
    }
    &::after {
      top: 6em;
      left: 6em;
      @include mx.circle(26.5em, #545454);
      background-image: linear-gradient(-45deg, #7f7f7f 30%, #545454);
    }
  }
  .shutter {
    @include mx.pos_tl(8.625em, 8.625em);
    @include mx.circle(21.5em, #181816);
    overflow: hidden;
    box-shadow: 0 0 0 0.75em #181816, 0 0 0 1.5em #373737;
    .leaf {
      position: absolute;
      @include mx.dimension(22em, 22em);
      border-radius: 0 0 9em 13em / 0 0 3em 5em;
      &.a {
        bottom: 4.375em;
        right: 1em;
        box-shadow: 0 0.25em 0 #4c2f4d, -8em 3em 4em #442149, 0 10em 0 #7a21a3,
          inset 0 -0.25em 0.25em #200526;
        @include mx.pseudo {
          display: block;
          width: inherit;
          height: inherit;
          border-radius: inherit;
        }
        &::before {
          bottom: -4em;
          right: 4em;
          transform: rotate(300deg);
          box-shadow: 3em 2em 3em #5d206e, 0 10em 0 #9731c5,
            inset 0 -0.25em 0.25em #200526;
        }
        &::after {
          bottom: -9.5em;
          right: 2.5em;
          transform: rotate(240deg);
          box-shadow: 8em 5em 8em #361d3b, 0 10em 0 #8829b7,
            inset 0 -0.25em 0.25em #200526;
        }
      }
      &.b {
        bottom: -5.5em;
        right: -2em;
        transform: rotate(180deg);
        box-shadow: 10em 7em 6em #1e618b, 0 10em 0 #522162,
          inset 0 -0.25em 0.25em #200526;
        @include mx.pseudo {
          display: block;
          width: inherit;
          height: inherit;
          border-radius: inherit;
        }
        &::before {
          bottom: -5.37em;
          right: 4.5em;
          clip: rect(0, 18em, 43.11em, 0);
          transform: rotate(-60deg);
          box-shadow: 5.5em 10em 4em #256186, 0 10em 0 #2f3241,
            inset 0 -0.25em 0.25em #200526;
        }
        &::after {
          bottom: -8.5em;
          right: 2.3em;
          transform: rotate(-120deg);
          clip: rect(0, 16em, 43.11em, 0);
          box-shadow: -0.625em 0em 0.725em #4a7693, -11em 2em 5em #1e618b,
            0 10em 0 #411e46, inset 0 -0.25em 0.25em #200526;
        }
      }
      &.c {
        bottom: 4.375em;
        right: 1em;
        clip: rect(0, 10em, 43.11em, 0);
        box-shadow: 0 0.25em 0 #4c2f4d, -3em 2.5em 4em #442149, 0 10em 0 #7a21a3,
          inset 0 -0.25em 0.25em #200526;
      }
    }
    .lens-outer {
      position: relative;
      @include mx.circle(10em, null);
      margin: 6em 0 0 5.6em;
      background-image: radial-gradient(
        circle closest-side at 83% 83%,
        #c0b9c0,
        #968d9a 35%,
        #495057
      );
      @include mx.pseudo {
        display: block;
      }
      &::before {
        top: 0.625em;
        left: 0.625em;
        @include mx.circle(8.75em, #351c3c);
        box-shadow: 0 0 0 0.125em #111d29;
        background-image: linear-gradient(-45deg, #112b3c, #351c3c 70%);
      }
      &::after {
        top: 2.375em;
        left: 2.375em;
        @include mx.circle(5.25em, #150619);
        background-image: linear-gradient(-45deg, #0a2035, #17081b 70%);
      }
    }
    .lens {
      @include mx.pos_tl(9.5em, 9.125em);
      @include mx.circle(2.75em, #000);
      border: 0.125em solid #221f27;
      @include mx.pseudo_after {
        top: -2.875em;
        left: -2.875em;
        @include mx.circle(8.25em, null);
        transform: rotate(45deg);
        box-shadow: inset -0.375em 0 0.375em -0.25em #7c4c88;
      }
    }
  }
  .flare {
    @include mx.pos_tl(8.625em, 8.625em);
    @include mx.circle(21.5em, null);
    background-image: radial-gradient(
      ellipse at 27% 17%,
      rgba(63, 162, 233, 0.3) 4%,
      rgba(0, 0, 0, 0) 49%
    );
    @include mx.pseudo_after {
      top: 0.375em;
      left: 0.375em;
      @include mx.circle(20.75em, null);
      box-shadow: inset -1.125em -2em 2em -1.5em rgba(140, 88, 152, 0.6);
    }
    &2 {
      @include mx.pos_tl(9.125em, 9.125em);
      @include mx.circle(20.5em, null);
      overflow: hidden;
      transform: rotate(-20deg);
      @include mx.pseudo {
        display: block;
        border-radius: 10.75em/5em;
        width: 18.75em;
        height: 9em;
      }
      &::before {
        top: -1em;
        left: -5em;
        background-color: rgba(168, 212, 255, 0.1);
        clip: rect(7.45em, 14.8em, 9.5em, 0em);
      }
      &::after {
        top: 6.45em;
        left: 5.9em;
        box-shadow: 0 -5em 0 rgba(168, 212, 255, 0.1);
        clip: rect(0em, 19.5em, 0.85em, 3.9em);
      }
    }
    &3 {
      @include mx.pos_tl(9.125em, 9.125em);
      @include mx.circle(20.5em, rgba(168, 212, 255, 0.1));
      clip: rect(0, 20.5em, 6.458em, 0);
      transform: rotate(-20deg);
      @include mx.pseudo_before {
        display: block;
        @include mx.rect(6.25em, 5.5em, null);
        transform: rotateX(30deg);
        top: 1.25em;
        left: 5.5em;
        border-radius: 6.25em/5.5em;
        box-shadow: inset 0 -3em 5em 0em rgba(255, 255, 255, 0.2);
      }
    }
  }
}
